<template>
  <div class="page-department">
    <div class="component-mainHeader">
      <div class="top">
        <div class="topleft">
          <p>
            <span class="iconfont" style="color:#1abc9a;margin-right:3px;">&#xe607;</span>交竣工资料
          </p>
        </div>
        <div class="topright">
          <el-button type="info" @click="$router.go(-1)">
            <span style="font-weight:700;margin-right:5px;" class="iconfont">&#xe606;</span>返回
          </el-button>
        </div>
      </div>
    </div>
    <div class="component-model">
      <el-dialog title="成功" :visible.sync="dialogAdd" width="450px">
        <div>
          <p style="font-size:18px">保存成功</p>
          
          <a class="save_btn" :href="'/api/web/proFinishProjectFile/toPocessFinishProjectFile?proId='+$route.query.row">导出文件到本地</a>
        </div>
      <!--  <span slot="footer" class="dialog-footer">
          <el-button @click="dialogAdd = false">取消</el-button>
          <el-button @click="dialogAdd = false;">确定</el-button>
        </span>-->
      </el-dialog>
    </div>

    <div class="total" style="width:1100px;margin: 20px auto">
      <div class="title">
        <div>交竣工资料</div>
        <div>
          <span @click="edit">编辑</span>
          <span @click="save()">保存</span>
        </div>
      </div>
      <div class="tables">
        <table cellpadding="0" cellspacing="0" border="1">
          <tr>
            <td>档号：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_1"></el-input>
            </td>
            <td>项目编号：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_2"></el-input>
            </td>
          </tr>
          <tr>
            <td>工程承接单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_5"></el-input>
            </td>
            <td>项目负责人：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_6"></el-input>
            </td>
          </tr>
          <tr>
            <td>保存期限：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_9"></el-input>
            </td>
            <td>建设地点：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_9_1"></el-input>
            </td>
          </tr>

          <tr>
            <td>建设单位负责人：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_12"></el-input>
            </td>
            <td>监理单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_13"></el-input>
            </td>
          </tr>

          <tr>
            <td>设计负责人：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_16"></el-input>
            </td>
            <td>编制人：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_7"></el-input>
            </td>
          </tr>

          <tr>
            <td>编制日期：</td>
            <td>
              <!-- 重复了 -->
              <el-date-picker
                v-model="form.a1_20"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
            <td>编制单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_21"></el-input>
            </td>
          </tr>

          <tr>
            <td>施工委托书（许可证）号：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_24"></el-input>
            </td>

            <td>施工经理\施工员\质量员\安全员：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_25"></el-input>
            </td>
          </tr>
          <tr>
            <td>合同期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_28"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
            <td>计划停（复）工作期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_29"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td>洽谈时间：</td>
            <td>
              <el-date-picker
                v-model="form.a1_32"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
            <td>洽谈地点：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_33"></el-input>
            </td>
          </tr>

          <tr>
            <td>原设计规定内容：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_36"></el-input>
            </td>

            <td>变更后的工作内容：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_37"></el-input>
            </td>
          </tr>

          <tr>
            <td>原设计预算数：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_40"></el-input>
            </td>

            <td>变更后预算数：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_41"></el-input>
            </td>
          </tr>

          <tr>
            <td>验收日期：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_44"></el-input>
            </td>

            <td>主送：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_45"></el-input>
            </td>
          </tr>

          <tr>
            <td>完工日期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_48"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
            <td>合同工期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_49"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td>实际工程量：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_52"></el-input>
            </td>

            <td>申报交工验收日期：</td>
            <td>

               <el-date-picker
                v-model="form.a1_52_1"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td>单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_55"></el-input>
            </td>

            <td>实际完成量：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_56"></el-input>
            </td>
          </tr>

          <tr>
            <td>施工地址：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_59"></el-input>
            </td>

            <td>任务书号：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_60"></el-input>
            </td>
          </tr>

          <tr>
            <td>工程名称：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_3"></el-input>
            </td>

            <td>编制：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_17"></el-input>
            </td>
          </tr>

          <tr>
            <td>工程主管部门：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_10"></el-input>
            </td>

            <td>监理负责人：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_14"></el-input>
            </td>
          </tr>

          <tr>
            <td>审核：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_18"></el-input>
            </td>

            <td>施工详细地址：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_22"></el-input>
            </td>
          </tr>

          <tr>
               <!-- format="yyyy年MM月dd日" -->
            <td>计划开工日期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_26"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable

                value-format="timestamp"
              ></el-date-picker>
            </td>
            <td>实际停(复)工期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_30"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td>设计补充图纸名称：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_34"></el-input>
            </td>

            <td>原设计工程量：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_38"></el-input>
            </td>
          </tr>

          <tr>
            <td>事故时间：</td>
            <td>
              <el-date-picker
                v-model="form.a1_42"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>

            <td>抄送：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_46"></el-input>
            </td>
          </tr>

          <tr>
            <td>实际工期：</td>
            <td>
               <el-input :disabled="flag" v-model="form.a1_50"></el-input>
            </td>

            <td>序号：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_53"></el-input>
            </td>
          </tr>

          <tr>
            <td>余料接收单位：</td>
            <td>
         
                 <el-input :disabled="flag" v-model="form.a1_57"></el-input>
            </td>

            <td>建设单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_4"></el-input>
            </td>
          </tr>

          <tr>
            <td>编制日期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_8"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>

            <td>工程负责人：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_11"></el-input>
            </td>
          </tr>

          <tr>
            <td>设计单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_15"></el-input>
            </td>

            <td>批准：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_19"></el-input>
            </td>
          </tr>

          <tr>
            <td>承接单位：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_23"></el-input>
            </td>

            <td>计划交工日期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_27"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td>影响工期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_31"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>

            <td>设计补充图纸图号：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_35"></el-input>
            </td>
          </tr>

          <tr>
            <td>变更后工作量：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_39"></el-input>
            </td>

            <td>报告时间：</td>
            <td>
              <el-date-picker
                v-model="form.a1_43"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>

          <tr>
            <td>开工时间：</td>
            <td>
              <el-date-picker
                v-model="form.a1_47"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>

            <td>工程概预算：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_51"></el-input>
            </td>
          </tr>

          <tr>
            <td>计划量：</td>
            <td>
              <el-input :disabled="flag" v-model="form.a1_54"></el-input>
            </td>

            <td>申请验收日期：</td>
            <td>
              <el-date-picker
                v-model="form.a1_58"
                type="date"
                placeholder="选择日期"
                :disabled="flag"
                clearable
                value-format="timestamp"
              ></el-date-picker>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "handInfoos",
  data() {
    return {
      info: [],
      flag: true,
      dialogAdd: false,
      form:{a1_8:''}
    };
  },
  created() {
    this.getDetails()
  },
  mounted() {},
  methods: {
    changeData(a){
      for(let i in a){
        if(a[i] == null || a[i] == 'null'){
          a[i]=""
        }
      }
      return a
    },
    produce() {},
    edit() {
      this.flag = false;
    },
    // 刚进来获取信息详情

      getDetails(){
        console.log(111)

      let that = this
      let suCb = res => {
        that.form = res.data.data.proTplTempTable;
        console.log("------------------------")
        console.log(res.data.data.proTplTempTable,99)
        console.log(res,"请求成功")


        that.form = that.changeData(that.form)
        console.log(that.form)

    }
      let erCb = res => {
       console.log(res,"请求失败")
      }

      let params = {
        // 传过来的项目id
        proId:that.$route.query.row
      }
      let req = {
        url: "/api/web/proFinishProjectFile/getFinishProjectFileInfo",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);

      },

    // 保存竣工的表单信息
    save() {
      let that = this
      let suCb = res => {
        that.dialogAdd = true;
      }
      let erCb = res => {
      }
      let params = {
        proId:that.$route.query.row,
        a1_1:that.form.a1_1,
        a1_2:that.form.a1_2,
        a1_3:that.form.a1_3,
        a1_4:that.form.a1_4,
        a1_5:that.form.a1_5,
        a1_6:that.form.a1_6,
        a1_7:that.form.a1_7,
        a1_8:that.form.a1_8+"",
        a1_9:that.form.a1_9,
        a1_10:that.form.a1_10,
        a1_11:that.form.a1_11,
        a1_12:that.form.a1_12,
        a1_13:that.form.a1_13,
        a1_14:that.form.a1_14,
        a1_15:that.form.a1_15,
        a1_16:that.form.a1_16,
        a1_17:that.form.a1_17,
        a1_18:that.form.a1_18,
        a1_19:that.form.a1_19,
        a1_20:that.form.a1_20+"",
        a1_21:that.form.a1_21,
        a1_22:that.form.a1_22,
        a1_23:that.form.a1_23,
        a1_24:that.form.a1_24,
        a1_25:that.form.a1_25,
        a1_26:that.form.a1_26+"",
        a1_27:that.form.a1_27+"",
        a1_28:that.form.a1_28+"",
        a1_29:that.form.a1_29+"",
        a1_30:that.form.a1_30+"",
        a1_31:that.form.a1_31+"",
        a1_32:that.form.a1_32+"",
        a1_33:that.form.a1_33,
        a1_34:that.form.a1_34,
        a1_35:that.form.a1_35,
        a1_36:that.form.a1_36,
        a1_37:that.form.a1_37,
        a1_38:that.form.a1_38,
        a1_39:that.form.a1_39,
        a1_40:that.form.a1_40,
        a1_41:that.form.a1_41,
        a1_42:that.form.a1_42+"",
        a1_43:that.form.a1_43+"",
        a1_44:that.form.a1_44,
        a1_45:that.form.a1_45,
        a1_46:that.form.a1_46,
        a1_47:that.form.a1_47+"",
        a1_48:that.form.a1_48+"",
        a1_49:that.form.a1_49+"",
        a1_50:that.form.a1_50,
        a1_51:that.form.a1_51,
        a1_52:that.form.a1_52,
        a1_53:that.form.a1_53,
        a1_54:that.form.a1_54,
        a1_55:that.form.a1_55,
        a1_56:that.form.a1_56,
        a1_57:that.form.a1_57+"",
        a1_58:that.form.a1_58+"",
        a1_59:that.form.a1_59,
        a1_60:that.form.a1_60,
        a1_52_1:that.form.a1_52_1+"",
        a1_9_1:that.form.a1_9_1,
      }
      let req = {
        url: "/api/web/proFinishProjectFile/saveFinishProjectFile",
        methods: "post",
        data: params,
        success: suCb,
        error: erCb
      };
      that.$https(req);
    },
  }
};
</script>

<style scoped>
.component-mainHeader .top .topright {
  font-size: 24px;
}

.component-searchHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
}

.component-searchHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-searchHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-searchHeader .right {
  width: 120px;
  display: flex;
  justify-content: flex-end;
  margin-right: 30px;
}

.component-searchHeader .right button {
  width: 80px;
  padding: 0 15px;
  height: 30px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 12px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-searchHeader .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.component-search-box {
  width: 1100px;
  height: 60px;
  box-sizing: border-box;
  background-color: #fff;
  border: 1px solid #e4e4e4;
  border-top: none;
  margin: 0 auto;
  text-align: left;
  padding-left: 30px;
  line-height: 60px;
}

.component-search-box .el-input__inner {
  height: 35px;
  display: inline-block;
}

.component-listHeader .search-header {
  width: 1100px;
  box-sizing: border-box;
  border: 1px solid rgba(228, 228, 228, 1);
  background-color: rgba(255, 255, 255, 1);
  margin: 20px auto 0;
  border-bottom: 0;
}

.component-listHeader .search-header .left-title {
  display: flex;
  justify-content: space-between;
  width: 100%;
  background-color: rgba(243, 243, 243, 1);
  height: 45px;
  box-sizing: border-box;
}

.component-listHeader .search-header .left-title .left-text {
  width: 20%;
  color: #666;
  font-family: "微软雅黑";
  font-weight: 400;
  font-size: 12px;
  line-height: 45px;
  text-align: left;
  margin: 0 0 0 30px;
}

.component-listHeader .search-header .right {
  width: 140px;
  display: flex;
  justify-content: flex-end;
  margin-right: 10px;
}

.component-listHeader .search-header .right button {
  padding: 0 15px;
  height: 30px;
  width: 120px;
  margin: 6px 5px;
  line-height: 30px;
  font-size: 14px;
  color: #666;
  background-color: #fff;
  border: 1px solid #ccc;
}

.component-listHeader .search-header .right button:hover {
  background-color: #f3f3f3;
  cursor: pointer;
}

.component-listHeader .search-header .right .right-select-margin {
  margin-top: 6px;
  margin-right: 8px;
}

.table {
  width: 1100px;
  margin: 0 auto;
}
.table td {
  width: 250px;
  height: 40px;
  text-align: center;
  border-color: #e4e4e4;
}

.table tr td:nth-child(1) {
  background-color: #f9fafc;
  border-left: none;
}

.table tr td:nth-child(3) {
  background-color: #f9fafc;
}

.title {
  background: #f8f8f8;
  height: 50px;
  padding: 0 20px;
  font-size: 14px;
  border: 1px solid #e4e4e4;
  border-bottom: none;
}
.title > div:first-of-type {
  float: left;
  color: #666;
  line-height: 50px;
}
.title > div:last-of-type {
  float: right;
}
.title > div:last-of-type span {
  display: inline-block;
  margin-left: 20px;
  padding: 5px 20px;
  margin-top: 10px;
  cursor: pointer;
  border-radius: 4px;
}
.title > div:last-of-type span:first-of-type {
  border: 1px solid #e4e4e4;
  color: #666;
  background: #fff;
}
.title > div:last-of-type span:last-of-type {
  border: 1px solid #1abc9c;
  color: #fff;
  background: #1abc9c;
}

.tables table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  margin: 0;
  padding: 0;
  border: none;
  font-size: 12px;
}
.tables table td:nth-of-type(2n) {
  text-align: left;
}
.tables table td:nth-of-type(2n + 1) {
  text-align: right;
  padding-right: 20px;
  width: 160px;
  background: #f9fafc;
}

.save_btn {
  display: block;
  width: 180px;
  height: 35px;
  line-height: 35px;
  background-color: #1abc9a;
  border: none;
  color: #fff;
  margin: 20px auto;
  border-radius: 5px;
}

.save_btn:hover {
  cursor: pointer;
}
</style>
